<template>
	<view class="main">
		<view class="headBackground">
			<u-navbar class="navbar"  bgColor="rgba(255, 255, 255, 0)" :placeholder="true" title="" :autoBack="true">
				<template #center>
					<view style="font-weight: 600;">{{state.pageTitle}}</view>
				</template>
			</u-navbar>
		</view>
		<view class="cardBox">
			<swiper class="swiper-box" :indicator-dots="true" @change="change" :current="state.current">
				<swiper-item class="card" v-for="(item, index) in state.cardList" :key="index">
						<view class="cardH">
							{{item.cardName}}
						</view>
						<view class="cardC">
							有效期至{{item.endTime}}
						</view>
						<view class="cardF">
							<view class="cardFL">
								{{item.cardInfo || '获职位置顶权益'}}
							</view>
							<view class="cardFR" @click="toRenew" v-if="item.isUse==1">立即续费</view>
							<view class="cardFR" @click="toRenew" v-else>立即开通</view>
						</view>
				</swiper-item>
			</swiper>
			
			
			
		</view>
		
		<view class="Equity">
			<view class="EquityH">
				<view class="text1">
					我的权益
				</view>
				<view class="text2">
					已使用{{state.equityInfo.day || 0}}/{{state.equityInfo.days || 0}}天
				</view>
			</view>
			<view class="EquityF">
				<view class="modal">
					<text class="num">{{state.equityInfo.day || 0}}天</text>
					<view class="text">{{state.pageTitle}}</view>
				</view>
				<view class="modal">
					<text class="num">{{state.equityInfo.lookNumber || 0}}</text>
					<view class="text">看过我</view>
				</view>
				<view class="modal">
					<text class="num">{{state.equityInfo.connectNumber || 0}}</text>
					<view class="text">与我联系</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script setup lang="ts">
	
	import { ref,reactive,getCurrentInstance} from "vue";
	import {useRouter} from 'uni-mini-router'
	import {onShow,onLoad } from '@dcloudio/uni-app'
	const {proxy} = getCurrentInstance()
	let router = useRouter()
	
	let state = reactive({
		info:{},
		pageTitle:'简历置顶',
		cardList:[],
		equityInfo:{} ,//权益信息
		current:1
		
	})
	onLoad((options)=>{
		state.info = options || {}
		let url = ''
		if(options.pageType && options.pageType == 'bossMine'){
			state.pageTitle = "职位置顶"
			url = proxy.$api.meiyeRecruitVipCard3GetLogList
			
		}else{
			state.pageTitle = "简历置顶"
			url = proxy.$api.meiyeRecruitVipCard3GetLogList2
			// meiyeRecruitHunterInfo2DetailsFun()
		}
		meiyeRecruitVipCard3GetLogListFun(url)
		
		
		
	})
	
	
	// 获取职位置顶信息
	const meiyeRecruitVipCard3GetLogListFun = (url)=>{
		//获取详情
		proxy.$req('GET', url).then((res) => {
			if(res.code === 200){
				state.cardList = res.result
				state.equityInfo = state.cardList[0]
				
			}
		})
	}
	
	const change = (e)=> {
		console.log(e)
		state.current = e.detail.current
		state.equityInfo = state.cardList[state.current]
	}
	
	const toRenew = (e) => {
		router.push({
			name: 'buyVip'
		})
	}
</script>

<style lang="scss" scoped>
	.main{
		position:relative;
	}
	
	.Equity{
		width: 686rpx;
		height: 276rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0,0,0,0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		margin: 30rpx auto;
		padding: 30rpx;
		box-sizing: border-box;
		.EquityH{
			display: flex;
			justify-content: space-between;
			.text1{
				font-size: 32rpx;
				font-weight: 500;
				color: rgba(0,0,0,0.85);
			}
			.text2{
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0,0,0,0.45);
			}
		}
		.EquityF{
			display: flex;
			justify-content: space-around;
			margin-top: 60rpx;
			.modal{
				width: 180rpx;
				text-align: center;
				.num{
					height: 48rpx;
					font-size: 40rpx;
					font-weight: bold;
					color: #000000;
					
				}
				.text{
					margin-top: 10rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(0,0,0,0.65);
				}
			}
		}
	}
	.headBackground{
		width: 750rpx;
		height: 472rpx;
		background-image: url(@/static/images/mineBg.png);
		background-size: cover;
		
	}
	
	.cardBox{
		padding:0 30rpx;
		width: 100%;
		box-sizing: border-box;
		// margin: 30rpx auto 0;
		
		// height: 254rpx;\
		position: absolute;
		top:140rpx;
		left:0;
	}
	.swiper-box{
		border-radius: 20rpx !important;
		overflow: hidden;
		transform: translateY(0); // 关键代码
		
		
	}
	.card{
		// @include flex;
		flex-shrink: 1;
		// margin:0 24rpx;
		width: 60%;
		// overflow: hidden;
		// width: 686rpx;
		height: 284rpx;
		// margin: -450rpx auto 0 auto;
		background-image: url(@/static/images/vipback1.png);
		background-size: cover;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		.cardH{
			font-size: 36rpx;
			font-weight: 500;
			color: #FFE9C9;
		}
		.cardC{
			font-size: 28rpx;
			font-weight: 400;
			color: #FFE9C9;
			margin: 10rpx 0 30rpx 0;
		}
		.cardF{
			display: flex;
			justify-content: space-between;
			.cardFL{
				line-height: 64rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #FFE9C9;
			}
			.cardFR{
				width: 176rpx;
				height: 64rpx;
				background: url(@/static/images/vipButton.png);
				background-size: 100%;
				text-align: center;
				line-height: 64rpx;
				font-size: 28rpx;
				font-weight: 600;
				color: #000000;
			}
		}
		
	}
	
</style>
